<template>
  <div id="app">
    <div class="aa"> 
    <div class="one" v-for="item of detail" :key="item.id">
        <img class="pic" :src="item.picUrl" alt="">
        <p>{{item.name}}</p>
    </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data(){
    return{
      detail:[]
    }
  },
  mounted(){
    console.log(this.$route.query);
    var {key} = this.$route.query
    if(key ==1){
      axios.get("http://47.108.197.28:3000/top/playlist/highquality").then(res=>{
        // console.log(res.data.playlists);
        res.data.playlists.forEach(item=>{
          var {name,coverImgUrl} = item;
          this.detail.push({
            name,
            picUrl:coverImgUrl
          })
        })
      })
    }else{
       axios.get("http://47.108.197.28:3000/album/newest").then(res=>{
        // console.log(res.data.albums)
        this.detail = res.data.albums
    })
    }if(key == 3){
      axios.get("http://47.108.197.28:3000/personalized/djprogram").then(res=>{
        // console.log(res.data.result)
        this.detail = res.data.result;
    })
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  font-size: 13px;
}
.one{
   padding-left: 10px;
   /* height: 160px; */
}
.aa{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pic{
  width: 130px;
}
.one{
  width: 130px;
  height: 180px;
}
</style>